var WastageProcessItem = function () {
  var template = /* html */ `
    <div class="wastage-process-item" :class="{'has-wastage':wastage!==null}">
      <template v-if="wastage!==null">
      <div class="wastage-process-item-content">
        <div class="wastage-process-item-baseinfo">
          <table cellspacing="0" cellpadding="0">
            <colgroup>
              <col width="28%">
              <col width="22%">
              <col width="28%">
              <col width="22%">
            </colgroup>
            <tr>
              <td>工序名称</td>
              <td colspan="3">{{wastage.processName}}</td>
            </tr>
            <tr>
              <td>当日用电量(kw·h)</td>
              <td>{{SysUtil.decimalNumber(wastage.todayUseEletic)}}</td>
              <td>当月用电量(kw·h)</td>
              <td>{{SysUtil.decimalNumber(wastage.monthUseEletic)}}</td>
            </tr>
            <tr>
              <td>日产能</td>
              <td>{{SysUtil.decimalNumber(wastage.todayCount)}}</td>
              <td>月产能</td>
              <td>{{SysUtil.decimalNumber(wastage.monthCount)}}</td>
            </tr>
          </table>
        </div>
        <div class="wastage-wastage-item-chart-content">
          <div class="wastage-img-div" v-if="wastage.energyImg!==''">
            <el-image ref="wastageImg" class="wastage-img" :src="formatImgUrl(wastage.energyImg)" fit="scale-down">
            </el-image>
          </div>
          <div class="wastage-item-chart" ref="chart"></div>
        </div>
      </div>
      </template>
    </div>
  `;

  return {
    props: {
      wastage: {
        type: Object,
        required: true
      },
      isShow: {
        type: Boolean,
        required: true
      },
      dateIndex: {
        type: Number,
        required: true
      }
    },

    watch:{
      changeData: function () {
        if (this.wastage === null) {
          return;
        }

        var self = this;
        this.$nextTick(function(){
          self.resetChart();
        });
      }
    },

    computed:{
      changeData: function () {
        var wastage = this.wastage;
        if (wastage === null) {
          return '';
        }

        var dateIndex = this.dateIndex;
        var isShow = this.isShow;
        return [isShow, dateIndex, wastage.todayCount].join('_');
      }
    },

    data: function () {
      return {
        SysUtil: SysUtil
      };
    },

    mounted:function(){
      var wastage = this.wastage;
      if (wastage === null) {
        return;
      }
      if (this.isShow) {
        this.showChart();
      }

      var self = this;
      $(this.$el).find('.wastage-item-chart').resize(function(){
        var $chart = $(self.$el).find('.wastage-item-chart');
        var chart = echarts.getInstanceByDom($chart[0]);
        if (chart !== undefined) {
          chart.resize();
        }
      });
    },

    methods:{
      getChart: function () {
        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          chart = echarts.init(chartDom);
        }
        return chart;
      },

      showChart: function () {
        var chart = this.getChart();
        var chartOption = this.getChartOption();
        this.resetChartOption(chartOption);
        chart.setOption(chartOption, true);
      },

      getChartOption:function(){
        var chartOption = {
          color: window.boardChartColor,
          grid: {
            right: 20,
            left: 50,
            bottom: 30,
            top: 30
          },
          xAxis: [{
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12,
              interval: 0,
              formatter: function (value) {
                return moment(value).format('MM-DD');
              }
            }
          }],
          yAxis: [{
            min: 0,
            max: 5,
            name: '单付用电量(w·h)',
            nameGap: 8,
            axisLine: {
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: '#fff',
              fontSize: 12
            }
          }],
          tooltip: {
            trigger: 'axis',
            formatter: function (params) {
              var param = params[0];
              var data = param.data;
              var texts = [
                param.name,
                `${param.marker}单付用电量:${data.perEletic}w·h`
              ];
              return texts.join('<br>');
            }
          },
          dataset: {
            source: []
          },
          series: [{
            type: 'line',
            encode: {
              x: 'createTime',
              y: 'perEletic'
            }
          }]
        };
        return chartOption;
      },

      resetChart:function(){
        if (!this.isShow) {
          return;
        }

        var chartDom = this.$refs['chart'];
        var chart = echarts.getInstanceByDom(chartDom);
        if (chart === undefined) {
          this.showChart();
          return;
        }

        var chartOption = {};
        this.resetChartOption(chartOption);
        chart.setOption(chartOption);
      },

      resetChartOption:function(chartOption){
        var wastage = this.wastage;
        var maxPerEletic = wastage.maxPerEletic;
        maxPerEletic = Math.ceil(_.round(maxPerEletic / 5, 2)) * 5;
        _.set(chartOption, 'yAxis[0].max', maxPerEletic);

        var chartData = wastage.getRecords(this.dateIndex);
        _.set(chartOption, 'dataset.source', chartData);
      }
    },

    template: template
  };
}();
